<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>组件间的通信-驼峰规则</title>
	<script src="/js/vue.js"></script>
	<style>

	</style>
</head>

<body>
	<!-- 父向子传递数据的时候， 通过pros properties : 1）子组件通过props接收子组件传递的数据 2）父组件通过v-bind绑定数据  -->

    <!-- 子向父传递数据的时候， 1）子组件通过$emit() 函数 发送一个 自定义事件 2）父组件 通过v-on监听事件从而来接收数据-->
	<div id="app">
		<!-- 3. 使用组件 -->
		<!-- <my-cpn></my-cpn> -->
		 
		 <!-- 2)父组件通过v-bind绑定数据 -->
		 <my-cpn v-bind:child-msg = "fatherMsg" v-on:childcpn-click="cpnClick($event)"></my-cpn>

         {{fatherCounter}}
	</div>

	<br>
	<!-- 第一步：创建模板 -->
	<template id="cpn">
		<div>
			<h2>这是子组件的标题</h2>
			<p>这是子组件的内容</p>
			<button @click="increase()">这是子组件的按钮+</button>
			<button @click="decrease()">这是子组件的按钮-</button>
			<p>这是子组件的计数{{counter}}</p>
			<p>{{msg}}</p>
			<p>{{childMsg}}</p>
            <button @click="btnClick()">向父组件传递数据</button>
		</div>
	</template>

	<script>

		//2. 创建子组件对象	
		const obj = {//子组件
			template: '#cpn',
			data() { // 组件内的data 键值对 value必须是一个函数，且要返回一个对象
				return {
					msg: 'hello world',
					msg2: this.childMsg,// 可以通过props接收数据同时绑定到data里面
					counter: 100
				}
			},
			//1）子组件通过props接收子组件传递的数据
			props:['childMsg'],

			methods: {
				increase() {
					console.log(this);
					this.counter++
				},
				decrease() {
					this.counter--
				},
                btnClick(item){
                    // 点击按钮，向父组件传递数据
                    //1）子组件通过$emit() 函数 发送一个 自定义事件
                    // 这边this指代子组件本身
                    this.$emit('childcpn-click'/*第一个参数，自定义事件名称*/,this.counter/*第二个参数，伴随事件传递的参数*/)
                }
			}
		}


		let app = new Vue({//父组件
			el: "#app",
			data: { // 实例中data 键值对，value是对象
				fatherMsg: 'hello shane',
                fatherCounter:0
			},
			methods: {
                cpnClick(item){
                    this.fatherCounter = item
                }
			},
			components: {
				// 增强写法
					// obj
				'my-cpn': obj
			}
		})
	</script>
</body>

</html>